<template>
  <div class="container">
    <div class="search-box">
      <el-select style="width: 150px;margin-right: 20px" v-model="query.type" value-key="name" placeholder="选择模板"
                 @change="getData">
        <el-option v-for="(item, index) in modList" :key="item" :label="item" :value="item"/>
      </el-select>
      <el-input
          v-model="query.key"
          placeholder="页面名称"
          class="search-input mr10"
          clearable
      ></el-input>
      <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
      <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true"
      >新增
      </el-button
      >
    </div>
    <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
    >
      <el-table-column
          prop="id"
          label="ID"
          width="200"
          align="center"
      ></el-table-column>
      <el-table-column prop="title" label="页面标题" align="center"></el-table-column>
      <el-table-column
          prop="type"
          label="页面类型"
          align="center"
      ></el-table-column>
      <el-table-column
          prop="isPublish"
          label="是否发布"
          align="center"
          :formatter="publishFormat"
      ></el-table-column>
      <el-table-column
          prop="publishTime"
          label="发布时间"
          align="center"
          :formatter="dateFormat"
      ></el-table-column>
      <el-table-column
          prop="updateTime"
          label="更新时间"
          align="center"
          :formatter="dateFormat"
      ></el-table-column>
      <el-table-column label="操作" width="280" align="center">
        <template #default="scope">
          <el-button
              type="primary"
              size="small"
              :icon="Edit"
              @click="handleEdit(scope.$index, scope.row)"
              v-permiss="15"
          >
            编辑
          </el-button>
          <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="handleDelete(scope.$index, scope.row)"
              v-permiss="16"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.page"
          :page-size="query.size"
          :total="pageTotal"
          @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <el-dialog
        :title="'新增'"
        v-model="visible"
        width="1000px"
        destroy-on-close
        :close-on-click-modal="false"
        @close="closeDialog"
    >
      <TableEdit :data="rowData" :edit="idEdit" :current="query.type" :update="updateData"/>
    </el-dialog>
  </div>

</template>

<script setup lang="ts" name="basetable">
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Delete, Edit, Search, CirclePlusFilled, View} from "@element-plus/icons-vue";
import TableEdit from "../components/page-table-edit.vue";
import page from "../api/page";
import {useRouter} from "vue-router";

const router = useRouter();
const modList = ref([
  // "article",
  "home",
  "model",
  "maininfo",
  // "milestone"
]);

interface TableItem {
  id: number;
  name: string;
  updateTime: string;
  modContent: string;
}

const query = reactive({
  key: "",
  page: 1,
  size: 10,
  type: "home"
});
const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);
// 获取表格数据
const getData = () => {
  page.selectPages(query, (res) => {
    if (res.code === 200) {
      tableData.value = res.data.list;
      pageTotal.value = Number(res.data.total) || 50;
    }
  });
};
getData();

// 查询操作
const handleSearch = () => {
  query.page = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.page = val;
  getData();
};

// 删除操作
const handleDelete = (index: number, item: TableItem) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
      .then(() => {
        page.delete({id: item.id}, (res) => {
          if (res.code === 200) {
            ElMessage.success("删除成功");
            tableData.value.splice(index, 1)
          } else {
            ElMessage.warning(res.message);
          }
        });
        ;
      })
      .catch(() => {
      });
};

const visible = ref(false);
const idEdit = ref(false);
const rowData = ref({});

const handleEdit = (index: number, row: TableItem) => {
  // idx = index;
  // rowData.value = row;
  // idEdit.value = true;
  // visible.value = true;
  console.log(row.id);
  if (row.type.indexOf("article") != -1) {
    router.push({name: "articleEditor", query: {id: row.id}});
  }
  if (row.type.indexOf("model") != -1) {
    router.push({name: "modelEditor", query: {id: row.id}});
  }
  if (row.type.indexOf("maininfo") != -1) {
    router.push({name: "mainInfoEditor", query: {id: row.id}});
  }
  if (row.type.indexOf("milestone") != -1) {
    router.push({name: "milestoneEditor", query: {id: row.id}});
  }
  if (row.type.indexOf("home") != -1) {
    router.push({name: "homeEditor", query: {id: row.id}});
  }
};

const publishFormat = (row) => {

  if (row.isPublish == 0) {
    return "未发布";
  }
  if (row.isPublish == 1) {
    return "已发布";
  }
  if (row.isPublish == 2) {
    return "更新内容未发布";
  }
}

import {getCurrentInstance} from "vue";

const {proxy}: any = getCurrentInstance()
const dateFormat = (row, column, value) => {
  return proxy.$dateFormat(value, "MM/dd/yyyy")
}

const updateData = (row: TableItem) => {
  getData();
  closeDialog();
};

const closeDialog = () => {
  visible.value = false;
  idEdit.value = false;
};

const visible1 = ref(false);
const handleView = (row: TableItem) => {
  rowData.value = row;
  visible1.value = true;
};
</script>

<style scoped>
.search-box {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 300px;
}
</style>
